<p-accordion [multiple]="true">
    <p-accordionTab header="{{'firmware_upgrade' | translate}}" [selected]="true">
        <div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'WEB_firmware_version' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-key">
                    <td style="width:210px; height:30px; padding-right:20px; font-size: 62.5%;"
                        align="left">{{firmwareUpgradeInformation.WEBFirmwareVersion}}</td>
                </div>
            </div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'BSN_firmware_version' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-key">
                    <td style="width:210px; height:30px; padding-right:20px; font-size: 14px;"
                        align="left">{{firmwareUpgradeInformation.BCGFirmwareVersion}}</td>
                </div>
            </div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    <button class="button-type"
                            pButton label="{{'upgrade_BSN_firmware' | translate}}"
                            (click)="selectedFirmwareUpgrade = true"></button>
                </div>
                <div class="p-col-6 local-accordion-text-key">
                    <button class="button-type" style="float: left"
                            pButton label="{{'factory_rest' | translate}}"
                            (click)="hintFactoryReset = true"></button>
                </div>
            </div>
        </div>
    </p-accordionTab>
</p-accordion>

<p-dialog header="{{'firmware_update_confirmation' | translate}}" [(visible)]="hintFirmwareUpgrade"
          [resizable]=false [modal]="true" [closable]="true" [draggable]="false" (onHide)="clearFiles.clear();">
    <div>
        <div class="p-grid">
            <div class="p-col-3">
                <i class="pi pi-question" style="font-size: 100px;float: left;margin-left: 30%"></i>
            </div>
            <div class="p-col-9">
                <div class="p-col-12" style="float: left">
                    <p style="float: left;font-size: 62.5%">{{'message1' | translate}}</p>
                </div>
                <div class="p-col-12">
                    <p style="float: left;font-size: 62.5%">{{'message2' | translate}}</p>
                </div>
            </div>
        </div>
    </div>
    <ng-template pTemplate="footer">
        <button pButton pRipple type="button" (click)="hintFirmwareUpgrade = false" label="{{'cancel'| translate}}"
                class="p-button-text p-button-lg"></button>
        <button pButton pRipple type="button" (click)="sendUpgradeFile(false)"
                label="{{'apply_change'| translate}}" class="p-button-text p-button-lg"></button>
        <button pButton pRipple type="button" (click)="sendUpgradeFile(true)"
                label="{{'apply_reboot'| translate}}" class="p-button-text p-button-lg"></button>
    </ng-template>
</p-dialog>

<p-dialog header="{{'firmware_update' | translate}}" [(visible)]="selectedFirmwareUpgrade"
          [style]="{width: '50vw'}" [resizable]=true [draggable]="false" [responsive]="true"
          [modal]="true" (onHide)="dialogClose(fu)">
    <div class="ui-g-12" style="height: 20%">
        <div class="ui-g-12">
            <p-steps [model]="stepItems" [(activeIndex)]="stepActiveIndex" [readonly]="true">
            </p-steps>
        </div>
        <div class="ui-g-12"
             [ngStyle]="{'height':'130px','position':(fuShowUIIndex==0?'relative':'absolute'),'top':(fuShowUIIndex==0?'auto':'-999999px')}">
            <div style="margin-top: 4%">
                <div class="p-grid">
                    <div class="p-col-6 local-accordion-text-key">
                        <p style="display: inline-block;vertical-align: middle;">{{'select_file' | translate}}:</p>
                    </div>
                    <div class="p-col-6 local-accordion-text-key">
                        <p-fileUpload #fu [headers]="" mode="basic" style="float: left;margin-top: 10px"
                                      chooseLabel="{{'open' | translate}}"
                                      chooseIcon="" uploadIcon=""
                                      showCancelButton="false" showUploadButton="false"
                                      accept=".BIN,.bin" (onSelect)="onSelect_FileUpload($event, fu)">
                        </p-fileUpload>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-g-12" [ngStyle]="{'height':'100px','position':'relative','top':'auto'}"
             *ngIf="fuShowUIIndex===1">
            <div class="ui-g-12" style="font-weight: bolder;font-size: 14px;margin-top: 5%">
                <p style="text-align: center">{{'upgrading'|translate}}...</p>
            </div>
            <div class="ui-g-12" style="height:20px">
                <p-progressBar [value]="fuUpgradeProgress" [showValue]=true></p-progressBar>
            </div>
        </div>
        <div class="ui-g-12" [ngStyle]="{'height':'100px','position':'relative','top':'auto'}"
             *ngIf="fuShowUIIndex===2">
            <div class="ui-g-12" style="font-weight: bolder;font-size: 14px;margin-top: 5%"
                 [ngStyle]="{'color':fuResult?'black':'red'}">
                <p style="text-align: center">{{fuResultMsg}}</p>
            </div>
            <div class="ui-g-12" style="height:20px">
                <button id="Upload_Finished" pButton type="button" icon="fa fa-check"
                        (click)="onReboot()"
                        label="OK" style="width:100px" [ngStyle]="{'display':'block','margin':'0 auto'}"></button>
            </div>
        </div>
    </div>
</p-dialog>

<p-dialog header="{{'restoring_factory_settings_confirm' | translate}}" [(visible)]="hintFactoryReset" [style]="{width: '40vw'}"
          [resizable]=false [modal]="true" [closable]="true" [draggable]="false">
    <div>
        <div class="p-grid">
            <div class="p-col-3">
                <i class="pi pi-info-circle" style="font-size: 50px;float: left;margin-left: 35%"></i>
            </div>
            <div class="p-col-9">
                <p style="float: left;font-size: 62.5%">{{'message5' | translate}}</p>
            </div>
        </div>
    </div>
    <ng-template pTemplate="footer">
        <button pButton pRipple type="button" (click)="hintFactoryReset=false" label="{{'cancel'| translate}}"
                class="p-button-text p-button-lg"></button>
        <button pButton pRipple type="button" (click)="sendFactoryReset();hintFactoryReset = false"
                label="{{'apply_change'| translate}}" class="p-button-text p-button-lg"></button>
    </ng-template>
</p-dialog>
